<template>
  <a-modal
    :maskClosable="maskClosable"
    title="编辑应用资源"
    :width="600"
    :visible="visible"
    :confirm-loading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-spin :spinning="confirmLoading">
      <a-form
        :labelCol="{span: 6}"
        :wrapperCol="{span: 14}"
        :form="form"
      >
        <a-form-item label="应用名称">
          <a-input
            autocomplete="off"
            placeholder="请输入应用名称"
            v-decorator="['name', decoratorOptions.name]"
          />
        </a-form-item>

        <!--<a-form-item label="应用类型">
          <a-select
            placeholder="请选择应用类型"
            v-decorator="['state', decoratorOptions.state]"
          >
            <a-select-option
              v-for="(item, index) in stateMap"
              :key="'state_' + index"
              :value="index"
            >
              {{item}}
            </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="云平台资源">
          <a-select
            placeholder="请选择云平台资源"
            v-decorator="['resourceId', decoratorOptions.resourceId]"
          >
            <a-select-option
              v-for="(item, index) in resourceList"
              :key="'resourceId_' + index"
              :value="item.id"
            >
              {{item.name}}
            </a-select-option>
          </a-select>
        </a-form-item>-->
        <!-- <a-form-item label="应用类型">
          <span class="ant-form-text">{{typeName}}</span>
        </a-form-item> -->

        <a-form-item label="云平台资源">
<!--          <a-input v-model="cloudResourceName" readOnly/>-->
          <span class="ant-form-text">{{cloudResourceName}}</span>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>
<script>
  import { gPostAction } from '@/api/manage'
  export default {
    name: 'EditModal',
    data() {
      return {
        visible: false,
        confirmLoading: false,
        form: this.$form.createForm(this),
        resourceList: [],
        appId: '',
        decoratorOptions: {
          name: {
            rules: [
              { required: true, message: '请输入应用名称' },
              { validator: this.validators.noWhitespace(), },
              { validator: this.validators.noIllegalString() },
              { max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
            ]
          },
          state: {
            initialValue: 0,
            rules: [{ required: true, message: '请选择应用类型' }],
          },
          resourceId: {
            rules: [{ required: true, message: '请选择云平台资源' }],
          }
        },
        stateMap: ['无状态', '有状态'],
        maskClosable: false,
        typeName:'',
        cloudResourceName:'',
      }
    },
    methods: {
      update(item) {
        this.visible = true
        this.appId = item.id
        this.typeName=item.typeName
        this.cloudResourceName=item.cloudResourceName
        this.loadResourceList().finally(res => {
          this.form.setFieldsValue({
            name: item.name,
/*            state: item.type,
            resourceId: item.cloudResourceId,*/
          })
        })
      },
      loadResourceList() {
        const postData = {
          pageSize: 99
        }

        return new Promise((resolve, reject) => {
          gPostAction('/cloud_resource/page', postData).then((res) => {
            if (res.success) {
              this.resourceList = res.data.list
              resolve(res)
            } else {
              reject(res)
            }
          })
        })
      },
      handleOk(e) {
        this.form.validateFields((err, values) => {
          if (!err) {
            this.confirmLoading = true

            const postData = {
              appId: this.appId,
              type: values.state,
              name: values.name,
              cloudResourceId: values.resourceId,
              title: "精确管控与供电制冷联动-基础资源细粒度感知-资源管理-L4层：应用资源"
            }
            gPostAction('/app/update1', postData).then((res) => {
              if (res.success) {
                this.$message.success('操作成功')
                this.$emit('ok')
              }
            }).finally(() => {
              this.handleCancel()
            })
          }
        })
      },
      handleCancel() {
        this.visible = false
        this.confirmLoading = false
      },
    },
  }
</script>
